@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义CSS变量 */
:root {
  /* 主色调 */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;

  /* 成功色 */
  --color-success-50: #f0fdf4;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;

  /* 警告色 */
  --color-warning-50: #fffbeb;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;

  /* 错误色 */
  --color-error-50: #fef2f2;
  --color-error-500: #ef4444;
  --color-error-600: #dc2626;

  /* 阴影 */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* 边框半径 */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* 间距 */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
}

/* 深色模式变量 */
.dark {
  --color-primary-50: #1e3a8a;
  --color-primary-100: #1e40af;
}

/* 自定义样式 */
@layer base {
  html {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300;
  }

  /* 选择文本样式 */
  ::selection {
    @apply bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100;
  }

  /* 焦点样式 */
  :focus-visible {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-900;
  }
}

@layer components {
  /* 按钮样式系统 */
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }

  .btn-lg {
    @apply px-6 py-3 text-base;
  }

  .btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 shadow-sm hover:shadow-md;
  }

  .btn-secondary {
    @apply bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600 focus:ring-gray-500;
  }

  .btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 shadow-sm hover:shadow-md;
  }

  .btn-success {
    @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500 shadow-sm hover:shadow-md;
  }

  .btn-ghost {
    @apply text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 focus:ring-gray-500;
  }

  .btn-outline {
    @apply border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 focus:ring-gray-500;
  }

  /* 输入框样式系统 */
  .input {
    @apply w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors;
  }

  .input-error {
    @apply border-red-300 dark:border-red-600 focus:ring-red-500;
  }

  .input-success {
    @apply border-green-300 dark:border-green-600 focus:ring-green-500;
  }

  /* 卡片样式系统 */
  .card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 transition-colors;
  }

  .card-hover {
    @apply hover:shadow-md hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-200;
  }

  .card-interactive {
    @apply cursor-pointer hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200;
  }

  /* 导航样式系统 */
  .nav-item {
    @apply flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200;
  }

  .nav-item-active {
    @apply bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 shadow-sm;
  }

  .nav-item-inactive {
    @apply text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100;
  }

  /* 状态标签系统 */
  .status-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ring-1 ring-inset;
  }

  .status-pending {
    @apply bg-yellow-50 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-300 ring-yellow-600/20 dark:ring-yellow-400/20;
  }

  .status-running {
    @apply bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 ring-blue-600/20 dark:ring-blue-400/20;
  }

  .status-completed {
    @apply bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 ring-green-600/20 dark:ring-green-400/20;
  }

  .status-failed {
    @apply bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 ring-red-600/20 dark:ring-red-400/20;
  }

  .status-cancelled {
    @apply bg-gray-50 dark:bg-gray-900/20 text-gray-700 dark:text-gray-300 ring-gray-600/20 dark:ring-gray-400/20;
  }

  /* 微博内容样式 */
  .weibo-content {
    @apply text-gray-800 dark:text-gray-200 leading-relaxed;
  }

  .weibo-content a {
    @apply text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:underline;
  }

  .weibo-content img {
    @apply inline-block w-4 h-4 mx-1;
  }

  .weibo-content .icon-link {
    @apply inline-block w-4 h-4 mx-1 align-middle;
  }

  /* 微博富文本元素样式 */
  .weibo-content .weibo-mention {
    @apply text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 cursor-pointer font-medium;
  }

  .weibo-content .weibo-topic {
    @apply text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 cursor-pointer font-medium;
  }

  .weibo-content .weibo-link {
    @apply text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:underline break-all;
  }

  .weibo-content .weibo-web-link {
    @apply text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 cursor-pointer font-medium;
  }

  .weibo-content .weibo-expand {
    @apply text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 cursor-pointer font-medium;
  }

  /* 微博内容交互效果 */
  .weibo-content .weibo-mention:hover,
  .weibo-content .weibo-topic:hover,
  .weibo-content .weibo-web-link:hover,
  .weibo-content .weibo-expand:hover {
    @apply bg-blue-50 dark:bg-blue-900/20 px-1 rounded transition-colors duration-200;
  }

  /* 表格样式 */
  .table {
    @apply w-full border-collapse;
  }

  .table th {
    @apply px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800;
  }

  .table td {
    @apply px-4 py-3 text-sm text-gray-900 dark:text-gray-100 border-b border-gray-200 dark:border-gray-700;
  }

  .table tbody tr:hover {
    @apply bg-gray-50 dark:bg-gray-800;
  }

  /* 模态框样式 */
  .modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 dark:bg-opacity-70 flex items-center justify-center z-50;
  }

  .modal-content {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full mx-4 p-6;
  }

  /* 下拉菜单样式 */
  .dropdown {
    @apply absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-50;
  }

  .dropdown-item {
    @apply block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 first:rounded-t-lg last:rounded-b-lg;
  }

  /* 进度条样式 */
  .progress-bar {
    @apply w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2;
  }

  .progress-fill {
    @apply h-2 bg-blue-600 rounded-full transition-all duration-300;
  }

  /* 分隔线样式 */
  .divider {
    @apply border-t border-gray-200 dark:border-gray-700;
  }

  /* 标签样式 */
  .tag {
    @apply inline-flex items-center px-2 py-1 rounded-md text-xs font-medium;
  }

  .tag-blue {
    @apply bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300;
  }

  .tag-green {
    @apply bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300;
  }

  .tag-yellow {
    @apply bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-300;
  }

  .tag-red {
    @apply bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300;
  }

  .tag-gray {
    @apply bg-gray-100 dark:bg-gray-900/20 text-gray-800 dark:text-gray-300;
  }
}

@layer utilities {
  /* 滚动条样式 */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgb(156 163 175) transparent;
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgb(156 163 175);
    border-radius: 3px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: rgb(107 114 128);
  }

  /* 深色模式滚动条 */
  .dark .scrollbar-thin {
    scrollbar-color: rgb(75 85 99) transparent;
  }

  .dark .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgb(75 85 99);
  }

  .dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: rgb(107 114 128);
  }

  /* 动画工具类 */
  .animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }

  .animate-slide-up {
    animation: slideUp 0.3s ease-out;
  }

  .animate-slide-down {
    animation: slideDown 0.3s ease-out;
  }

  .animate-scale-in {
    animation: scaleIn 0.2s ease-out;
  }

  /* 文本工具类 */
  .text-balance {
    text-wrap: balance;
  }

  .text-pretty {
    text-wrap: pretty;
  }

  /* 文本截断工具类 */
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .line-clamp-4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  /* 布局工具类 */
  .safe-area-inset {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* 玻璃态效果 */
  .glass {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.8);
  }

  .dark .glass {
    background-color: rgba(17, 24, 39, 0.8);
  }

  /* 渐变边框 */
  .gradient-border {
    background: linear-gradient(white, white) padding-box,
                linear-gradient(45deg, #3b82f6, #8b5cf6) border-box;
    border: 2px solid transparent;
  }

  .dark .gradient-border {
    background: linear-gradient(rgb(17, 24, 39), rgb(17, 24, 39)) padding-box,
                linear-gradient(45deg, #3b82f6, #8b5cf6) border-box;
  }
}

/* 动画关键帧 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* 响应式设计增强 */
@media (max-width: 640px) {
  .btn {
    @apply px-3 py-2 text-xs;
  }

  .card {
    @apply p-4;
  }

  .modal-content {
    @apply mx-2;
  }
}

/* 打印样式 */
@media print {
  .no-print {
    display: none !important;
  }

  .print-break {
    page-break-after: always;
  }

  body {
    @apply text-black bg-white;
  }
}
